<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Logic API Gateway</title>
  <link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
  <link href='css/typography.css' media='screen' rel='stylesheet' type='text/css'/>
  <link href='css/reset.css' media='screen' rel='stylesheet' type='text/css'/>
  <link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
  <link href='css/reset.css' media='print' rel='stylesheet' type='text/css'/>
  <link href='css/print.css' media='print' rel='stylesheet' type='text/css'/>
  <script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
  <script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
  <script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
  <script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
  <script src='lib/handlebars-2.0.0.js' type='text/javascript'></script>
  <script src='lib/underscore-min.js' type='text/javascript'></script>
  <script src='lib/backbone-min.js' type='text/javascript'></script>
  <script src='swagger-ui.js' type='text/javascript'></script>
  <script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
  <script src='lib/marked.js' type='text/javascript'></script>
  <script src='lib/swagger-oauth.js' type='text/javascript'></script>

  <!-- Some basic translations -->
  <!-- <script src='lang/translator.js' type='text/javascript'></script> -->
  <!-- <script src='lang/ru.js' type='text/javascript'></script> -->
  <!-- <script src='lang/en.js' type='text/javascript'></script> -->
  <style>
    .servers:hover {
      cursor:pointer;
    }
    .button_div{
      margin-top: 10px;
    }

    .login_input input{
      width: 400px;
      font-size: 0.9em;
      padding: 3px;
      margin: 0;
      margin-top: 10px;
    }
    .login_form{
      margin: auto;
      width: 400px;
    }

    #api_selector #logout{
      font-size: 0.9em;
      padding: 10px 20px 10px 20px;
      float: right;
      margin-top: -5px;
      border: 1px solid black;
      border-radius: 5px;
      background-color: darkseagreen;
      color: white !important;
    }

    #api_selector #logout:hover{
      font-size: 0.9em;
      padding: 10px 20px 10px 20px;
      float: right;
      margin-top: -5px;
      border: 1px solid black;
      border-radius: 5px;
      background-color: darkgreen;
      cursor:pointer;
    }

    .login_input a{
      font-size: 0.9em;
      padding: 10px 20px 10px 20px;
      float: right;
      margin-top: 10px;
      border: 1px solid black;
      border-radius: 5px;
      background-color: darkseagreen;
      color: white !important;
    }

    .login_input a:hover{
      font-size: 0.9em;
      padding: 10px 20px 10px 20px;
      float: right;
      margin-top: 10px;
      border: 1px solid black;
      border-radius: 5px;
      background-color: darkgreen;
      cursor:pointer;
    }


  </style>

  <script type="text/javascript">
    $(function () {

      //username=admin&password=adminadmin&grant_type=password&scope=read+write&client_secret=mySecretOAuthSecret&client_id=authserverapp

      var url = window.location.search.match(/url=([^&]+)/);
      if (url && url.length > 1) {
        url = decodeURIComponent(url[1]);
      } else {
        url = null;
      }

      $("#system-server").click(function(event){
        console.log("system-server");
        var url = window.location.search.match(/url=([^&]+)/);
        if (url && url.length > 1) {
          window.location.href = "?url=/system/rest/swagger.json";
        } else {
          window.location.href = window.location.href + "?url=/system/rest/swagger.json";
        }

      });

/*       $("#toshiba-server").click(function(event){
        console.log("toshiba-server");
        var url = window.location.search.match(/url=([^&]+)/);
        if (url && url.length > 1) {
          window.location.href = "?url=/toshiba/rest/swagger.json";
        } else {
          window.location.href = window.location.href + "?url=/toshiba/rest/swagger.json";
        }

      }); */

//      $("#auth-server").click(function(event){
//        console.log("auth-server");
//        var url = window.location.search.match(/url=([^&]+)/);
//        if (url && url.length > 1) {
//          window.location.href = "?url=/auth/rest/swagger.json";
//        } else {
//          window.location.href = window.location.href + "?url=/auth/rest/swagger.json";
//        }
//
//      });

      // Pre load translate...
      if(window.SwaggerTranslator) {
        window.SwaggerTranslator.translate();
      }
      window.swaggerUi = new SwaggerUi({
        url: url,
        dom_id: "swagger-ui-container",
        supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
        onComplete: function(swaggerApi, swaggerUi){
          if(typeof initOAuth == "function") {
            console.log("initOAuth");
            initOAuth({
              clientId: "authserverapp",
              clientSecret: "mySecretOAuthSecret",
              realm: "authserverapp",
              appName: "authserverapp",
              scopeSeparator: ","
            });
          }

          if(window.SwaggerTranslator) {
            window.SwaggerTranslator.translate();
          }

          $('pre code').each(function(i, e) {
            hljs.highlightBlock(e)
          });

          addApiKeyAuthorization();
        },
        onFailure: function(data) {
          log("Unable to Load SwaggerUI");
        },
        docExpansion: "none",
        apisSorter: "alpha",
        showRequestHeaders: true
      });

      function addApiKeyAuthorization(){
        var key = encodeURIComponent($('#input_apiKey')[0].value);
        if(key && key.trim() != "") {
            var value = "Bearer " + key;
            var authKeyHeader = new SwaggerClient.ApiKeyAuthorization("Authorization", value, "header");
            window.swaggerUi.api.clientAuthorizations.add("Authorization", authKeyHeader);
//            var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("api_key", key, "query");
//            window.swaggerUi.api.clientAuthorizations.add("api_key", apiKeyAuth);
            log("added key " + key);
        }
      }

      $('#input_apiKey').change(addApiKeyAuthorization);

      // if you have an apiKey you would like to pre-populate on the page for demonstration purposes...
      /*
        var apiKey = "myApiKeyXXXX123456789";
        $('#input_apiKey').val(apiKey);
      */

      window.swaggerUi.load();

      function log() {
        if ('console' in window) {
          console.log.apply(console, arguments);
        }
      }


      var access_token = readCookie("logic-swagger-access-token");

      if (access_token != null){
        var authKeyHeader = new SwaggerClient.ApiKeyAuthorization("Authorization", access_token, "header");
        window.swaggerUi.api.clientAuthorizations.add("Authorization", authKeyHeader);

        $("#login_form_container").hide();
        $("#swagger-ui-container").show();
        $("#logout").show();
      }else{
        $("#login_form_container").show();
        $("#swagger-ui-container").hide();
        $("#logout").hide();
      }

      $("#login").click(function(event){
        var username =  $('#login_username').val();
        var password =  $('#login_password').val();
        var loginData = {
          username: username,
          password: password,
          grant_type: "password",
          scope: "read+write",
          client_secret: "mySecretOAuthSecret",
          client_id: "authserverapp"
        };

        $.post( "/system/oauth/token", loginData, function( data ) {
          console.log(data);
          var value = "Bearer " + data.access_token;
          var authKeyHeader = new SwaggerClient.ApiKeyAuthorization("Authorization", value, "header");
          window.swaggerUi.api.clientAuthorizations.add("Authorization", authKeyHeader);
          createCookie("logic-swagger-access-token", value, 1);
          $("#login_form_container").hide();
          $("#swagger-ui-container").show();
          $("#logout").show();
        });
      });

      $("#logout").click(function(event){
        eraseCookie("logic-swagger-access-token");
        $("#login_form_container").show();
        $("#swagger-ui-container").hide();
        $("#logout").hide();
        window.location.href = "/api/swagger/index.html";
      });

      function createCookie(name, value, days) {
        var expires;

        if (days) {
          var date = new Date();
          date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
          expires = "; expires=" + date.toGMTString();
        } else {
          expires = "";
        }
        document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
      }

      function readCookie(name) {
        var nameEQ = encodeURIComponent(name) + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) === ' ') c = c.substring(1, c.length);
          if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
        }
        return null;
      }

      function eraseCookie(name) {
        createCookie(name, "", -1);
      }
  });
  </script>
</head>

<body class="swagger-section">
<div id='header'>
  <div class="swagger-ui-wrap">
    <a id="logo" href="#">Logic</a>
    <form id='api_selector'>
      <!--<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>-->
      <!--<div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>-->
      <!--<div class='input'><a id="explore" href="#" data-sw-translate>Explore</a></div>-->
      <div class='input'><a id="logout" data-sw-translate>Logout</a></div>
    </form>
  </div>
</div>

<div id="message-bar" class="swagger-ui-wrap" data-sw-translate>&nbsp;</div>
<div id="swagger-ui-container" class="swagger-ui-wrap">
  <div class="button_div"><a class="servers" id="system-server">System Server</a></div>
</div>

<div id="login_form_container" class="swagger-ui-wrap">
  <form class="login_form">
    <div class='login_input'><input placeholder="username" id="login_username" name="username" type="text"/></div>
    <div class='login_input'><input placeholder="password" id="login_password" name="password" type="password"/></div>
    <div class='login_input'><a id="login">Login</a></div>
  </form>
</div>
</body>
</html>
